import { FC } from 'react';

import IconButton from '@mui/joy/IconButton';
import Divider from '@mui/joy/Divider';
import { ActionBar, useVM } from '@todo/ui';

import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
import ShapeLineRoundedIcon from '@mui/icons-material/ShapeLineRounded';
import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded';
import { RoomViewModel } from '../../viewmodels/room.vm.ts';
import { ROOM_MODE } from '../../models/enum.ts';
import { observer } from 'mobx-react-lite';

const Bar: FC = () => {
  const vm = useVM(RoomViewModel);

  const setModeHandler = (mode: ROOM_MODE) => () => {
    if (vm.mode === mode) {
      return;
    }
    vm.setMode(mode);
  };

  const setViewNoteHandler = () => {
    vm.setNoteView();
  };

  return (
    <ActionBar>
      <IconButton
        onClick={setModeHandler(ROOM_MODE.CODE)}
        variant={vm.mode === ROOM_MODE.CODE ? 'solid' : 'soft'}
      >
        <CodeRoundedIcon />
      </IconButton>
      <IconButton
        onClick={setModeHandler(ROOM_MODE.DRAW)}
        variant={vm.mode === ROOM_MODE.DRAW ? 'solid' : 'soft'}
      >
        <ShapeLineRoundedIcon />
      </IconButton>

      <Divider orientation="vertical" />
      <IconButton
        onClick={setViewNoteHandler}
        variant={vm.noteView ? 'solid' : 'soft'}
      >
        <EditNoteRoundedIcon />
      </IconButton>
    </ActionBar>
  );
};

export default observer(Bar);
